html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}

* {
  scrollbar-color: auto;
  scrollbar-width: auto;
}

*,
::after,
::before {
  box-sizing: border-box;
  border: 0 solid #e6e6e6;
}

/* 宽度 */
.w-0 {
  width: 0;
}
.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}
.w-50 {
  width: 50%;
}
.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}
.w-half {
  width: 50%;
}
.w-full {
  width: 100%;
}

/* 高度 */
.h-0 {
  height: 0;
}
.h-10 {
  height: 10%;
}
.h-20 {
  height: 20%;
}
.h-30 {
  height: 30%;
}
.h-33 {
  height: 33%;
}
.h-40 {
  height: 40%;
}
.h-50 {
  height: 50%;
}
.h-60 {
  height: 60%;
}

.h-70 {
  height: 70%;
}

.h-80 {
  height: 80%;
}

.h-90 {
  height: 90%;
}
.h-half {
  height: 50%;
}
.h-full {
  height: 100%;
}

/*定位 */

.sticky {
  position: sticky;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.top-half {
  top: 50%;
}

.top-full {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0;
}

.right-full {
  right: 100%;
}

/*flex*/

.flex {
  display: flex;
}

.flex-1 {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-3 {
  flex-basis: 50%;
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-grow,
.grow {
  flex-grow: 1;
}

.flex-wrap {
  flex-flow: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-start {
  justify-content: start;
}

.justify-end {
  justify-content: end;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-center {
  justify-content: center;
}

.justify-left {
  justify-content: left;
}

.justify-right {
  justify-content: right;
}

/* 子项目对齐方式 */

.items-normal {
  align-items: normal;
}

.items-start {
  align-items: start;
}

.items-end {
  align-items: end;
}

.items-center {
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.wrap {
  flex-wrap: wrap;
}

/* display*/
.hidden {
  display: none;
}

/* 高度 */

.hr-1 {
  height: 0.25rem;
}

.hr-2 {
  height: 0.5rem;
}

.hr-3 {
  height: 0.75rem;
}

.hr-4 {
  height: 1rem;
}

.hr-5 {
  height: 1.25rem;
}

.hr-6 {
  height: 1.5rem;
}

.hr-7 {
  height: 1.75rem;
}

.hr-8 {
  height: 2rem;
}

.hr-9 {
  height: 2.25rem;
}

.hr-10 {
  height: 2.5rem;
}

.hr-11 {
  height: 2.75rem;
}

.hr-12 {
  height: 3rem;
}

.hr-13 {
  height: 3.25rem;
}

.hr-14 {
  height: 3.5rem;
}

.hr-15 {
  height: 3.75rem;
}

.hr-16 {
  height: 4rem;
}

.hr-17 {
  height: 4.25rem;
}
.hr-18 {
  height: 4.5rem;
}

.hr-19 {
  height: 4.75rem;
}

.hr-20 {
  height: 5rem;
}

.hr-21 {
  height: 5.25rem;
}

.hr-22 {
  height: 5.5rem;
}

.hr-23 {
  height: 5.75rem;
}

.hr-24 {
  height: 6rem;
}

.wr-1 {
  width: 0.25rem;
}

.wr-2 {
  width: 0.5rem;
}
.wr-3 {
  width: 0.75rem;
}

.wr-4 {
  width: 1rem;
}

.wr-5 {
  width: 1.25rem;
}

.wr-6 {
  width: 1.5rem;
}

.wr-7 {
  width: 1.75rem;
}

.wr-8 {
  width: 2rem;
}

.wr-9 {
  width: 2.25rem;
}

.wr-10 {
  width: 2.5rem;
}

.wr-11 {
  width: 2.75rem;
}

.wr-12 {
  width: 3rem;
}

/* gap*/

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-13 {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-15 {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-11 {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-13 {
  padding-left: 3.25rem;
  padding-right: 3.25rem;
}

.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px-15 {
  padding-left: 3.75rem;
  padding-right: 3.75rem;
}

.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-9 {
  padding-bottom: 2.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-11 {
  padding-bottom: 2.75rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-9 {
  padding-top: 2.25rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-11 {
  padding-top: 2.75rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-13 {
  padding-top: 3.25rem;
}
.pt-14 {
  padding-top: 3.5rem;
}

.pt-15 {
  padding-top: 3.75rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-7 {
  padding-left: 1.75rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-11 {
  padding-left: 2.75rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-13 {
  padding-left: 3.25rem;
}

.pl-14 {
  padding-left: 3.5rem;
}

.pl-15 {
  padding-left: 3.75rem;
}

.pl-16 {
  padding-left: 4rem;
}

.pl-17 {
  padding-left: 4.25rem;
}

.pl-18 {
  padding-left: 4.5rem;
}

.pl-19 {
  padding-left: 4.75rem;
}

.pl-20 {
  padding-left: 5rem;
}
.pl-21 {
  padding-left: 5.25rem;
}

.pl-22 {
  padding-left: 5.5rem;
}

.pl-23 {
  padding-left: 5.75rem;
}

.pl-24 {
  padding-left: 6rem;
}
.pl-25 {
  padding-left: 6.25rem;
}

.pl-26 {
  padding-left: 6.5rem;
}

.pl-27 {
  padding-left: 6.75rem;
}

.pl-28 {
  padding-left: 7rem;
}

.pl-29 {
  padding-left: 7.25rem;
}

.pl-30 {
  padding-left: 7.5rem;
}

.pl-31 {
  padding-left: 7.75rem;
}

.pl-32 {
  padding-left: 8rem;
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.pr-8 {
  padding-right: 2rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

/*块元素或者单元格的行内内容的水平对齐*/

.text-left {
  text-align: left;
}

.text-end {
  text-align: end;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-justify-all {
  text-align: justify-all;
}

/* border-radius */

.br-1 {
  border-radius: 0.25rem;
}

.br-2 {
  border-radius: 0.5rem;
}

.br-3 {
  border-radius: 0.75rem;
}

.br-4 {
  border-radius: 1rem;
}

/*字体间距*/

.ls-1 {
  letter-spacing: 0.1rem;
}

.ls-2 {
  letter-spacing: 0.2rem;
}

.ls-3 {
  letter-spacing: 0.3rem;
}

.ls-4 {
  letter-spacing: 0.4rem;
}

.ls-5 {
  letter-spacing: 0.5rem;
}

.ls-6 {
  letter-spacing: 0.6rem;
}

.ls-7 {
  letter-spacing: 0.7rem;
}

.ls-8 {
  letter-spacing: 0.8rem;
}

.ls-9 {
  letter-spacing: 0.9rem;
}

.ls-10 {
  letter-spacing: 1rem;
}

/*浮动*/

.float-none {
  float: none;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear {
  clear: both;
}

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid {
  display: grid;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 480px) {
  .container {
    width: 100%;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

@media (min-width: 744px) {
  .container {
    max-width: 744px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

.text-tiny {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: -0.002em;
}

@media (min-width: 744px) {
  .text-tiny {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.text-white {
  color: #ffffff;
}
